<template>
<div>
 <div class="recommend-title">热销推荐</div>
 <ul>
   <router-link :to="'/detail/'+item.id" tag="li" class="item border-bottom" v-for="item of  recommend" :key="item.id">
    <div class="item-img">
      <img  class="item-img " :src="item.imgUrl" >
    </div>
    <div class="item-info">
     <p class="item-title">{{item.title}}</p>
     <p class="item-desc">{{item.desc}}</p>
     <button class="item-button">查看详情</button>
    </div>
   </router-link>
 </ul>
</div>
 
 
</template>
<script>
export default {
    name:"HomeRecommend",
    props:{
      recommend:Array
    }
}
</script>
<style lang="stylus" scoped>
 @import "~styles/mixins.styl"
  .recommend-title
   line-height:.8rem
   background:#eee
   text-indent:.2rem
   margin-top:.2rem
  .item
    display:flex
    height 1.9rem
    .item-img
     width:1.7rem
     height 1.7rem
     padding:.1rem
    .item-info
      flex:1
      min-width:0
      padding 0.1rem
      .item-title
        font-size:.32rem
        ellipsis()
        line-height:.54rem
      .item-desc
        line-height:.4rem
        ellipsis()
        color:#ccc
       .item-button
        line-height:.44rem
        background #ff9300
        padding:0 .1rem
        border radius 0.06rem

</style>